<template>
  <div class="child">
    <h2>
      <!-- 下面这行不能写，因为v-model是双向绑定，且props不可修改 -->
      <!-- 父给的str：<input type="text" v-model="str"> -->

      <!-- 下面是对v-model指令的拆分 -->
      父给的str：<input 
                  type="text" 
                  :value="str" 
                  @input="updateStr($event.target.value)"
                >
    </h2>
  </div>
</template>

<script>
  export default {
    name:'Child',
    props:['str','updateStr'],
    /* methods: {
      test(event){
        // 及时的联系父，把用户输入的最新数据，交过去
        // console.log(event.target.value)
        this.updateStr(event.target.value)
      }
    }, */
  }
</script>

<style scoped>
  /* 此处写样式 */
  .child {
    margin-top: 10px;
    background-color: skyblue;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px;
  }
  input {
    height: 25px;
    font-size: 20px;
    width: 380px;
  }
</style>